<!--问题 -->
<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="24" :xs="24">
        <el-row :gutter="10" class="task_top mb20">
          <div class="task_top_1">
            <p><svg-icon icon-class="peoples" class="mr20" /> 问题&风险库</p>
            <el-input placeholder="输入风险/问题名称关键词进行检索" v-model="form.evaluateRiskName" clearable prefix-icon="el-icon-search">
              <el-button slot="append" icon="el-icon-search" @click="Search('up')">搜索</el-button>
            </el-input>
          </div>
        </el-row>
        <el-form  ref="queryForm" size="small" :inline="true" label-width="80px">
          <el-form-item>
            <el-button type="primary" icon="el-icon-top"  @click="exportClick">导出</el-button>
            <el-button type="danger" :disabled="selected.length === 0" icon="el-icon-delete"  @click="batchDel">删除</el-button>
          </el-form-item>
          <el-form-item label="查看:">
            <el-select placeholder="请选择" v-model="form.evaluateRiskType" clearable style="width: 200px">
              <el-option v-for="(item,index) in sendOptions" :key="item.dictCode" :label="item.dictLabel" :value="item.dictLabel"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="业务:">
            <el-select placeholder="请选择业务" v-model="form.evaluateRiskBusiness" clearable filterable style="width: 200px">
              <el-option v-for="(item,index) in businessList" :key="item.dictCode" :label="item.dictLabel" :value="item.dictLabel"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="提交时间:">
            <el-date-picker v-model="timeValue" style="width: 300px" format="yyyy-MM-dd" value-format="yyyy-MM-dd" type="daterange"
              range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search"  @click="Search('down')">搜索</el-button>
            <el-button icon="el-icon-refresh"  @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
        <el-table v-loading="loading" :data="questionList" border @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="50" align="center"></el-table-column>
          <el-table-column label="序号" width="50" align="center" type="index" />
          <el-table-column label="类别" align="center"  prop="evaluateRiskType" />
          <el-table-column label="名称" align="center" prop="evaluateRiskName" show-overflow-tooltip  />
          <el-table-column label="详细" align="center" prop="evaluateRiskContent" show-overflow-tooltip  />
          <el-table-column label="专家建议" align="center" prop="evaluateRiskZjjy" show-overflow-tooltip  />
          <el-table-column label="提交时间" align="center" prop="createTime" show-overflow-tooltip  />
          <el-table-column label="业务" align="center" prop="evaluateRiskBusiness" show-overflow-tooltip  />
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button type="primary" @click="handleClick('detail',scope.row)">查看</el-button>
              <el-button type="danger" @click="handleClick('del',scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div  style="height: 50px;display: flex;align-items: center;justify-content: center;">
          <!--          @current-change="onPageChange"-->
          <el-pagination :page-size="form.pageSize" background layout="prev, pager, next" :total="total"></el-pagination>
        </div>
      </el-col>
    </el-row>
    <!-- 填写风险对话框 -->
    <el-dialog title="问题/风险情况详情" :visible.sync="open" width="700px" append-to-body>
      <el-form ref="form" :model="diaLogform" disabled label-width="100px" label-suffix="：">
        <el-row>
          <el-col :span="24">
            <el-form-item label="业务">
              <span>{{diaLogform.evaluateRiskBusiness}}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="目标政策">
              <span>{{diaLogform.evaluateRiskMbzc}}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="提交人">
              <span>{{userInfo.nickName}}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="类别">
              <el-select v-model="diaLogform.evaluateRiskType" clearable filterable placeholder="请选择类别">
                <el-option v-for="(item,index) in sendOptions" :key="item.dictCode" :label="item.dictLabel" :value="item.dictLabel"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="风险名称">
              <el-input v-model="diaLogform.evaluateRiskName" placeholder="请输入风险名称" maxlength="20" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="风险详细">
              <el-input type="textarea" v-model="diaLogform.evaluateRiskContent" placeholder="请输入风险详细" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="专家建议"  prop="evaluateRiskZjjy">
              <el-input type="textarea" v-model="diaLogform.evaluateRiskZjjy" placeholder="请输入专家建议"  />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { delQuestion, questionPageList, questTionExport, riskType } from '@/api/eval'
  import someQuery from '@/mixins/search'
import { openMessage } from '@/utils'
import { mapGetters } from 'vuex'
import { download } from '@/utils/request'
  export default {
    name: "question",
    mixins:[someQuery],
    computed:{
      ...mapGetters(['userInfo']),
    },
    data() {
      return {
        total: 0,
        // 是否显示弹出层
        open: false,
        // 遮罩层
        loading: false,
        //数据
        questionList: [],
        sendOptions:[],
        timeValue: '',
        form: {
          pageNum: 1, //当前页码
          pageSize: 10,//一个多少条
          evaluateRiskBusiness:'',//业务
          evaluateRiskType:'',//问题/风险
          evaluateRiskName:'',//问题关键
          params:{
            // beginTime:'',//开始时间
            // endTime:'',//结束时间
          }
        },
        diaLogform:{},
        selected:[],//表格选择的数据
      };
    },
    watch: {
      timeValue:{
        handler:function(newVal,oldVal) {
          if (newVal instanceof Array) {
            this.form.params.beginTime = newVal[0] + ' 00:00:00'
            this.form.params.endTime = newVal[1] + ' 23:59:59'
          }else {
            this.form.params = {}
          }
        },
        deep:true
      }
    },
    created() {
      riskType().then((res) => {
        this.sendOptions = res.data
      })
      this.getQuestionList()
    },
    methods: {
      // 批量删除
      batchDel() {
        this.$confirm('您确定要批量删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let ids = this.selected
          delQuestion(ids).then((res) => {
            openMessage('删除成功','success')
            this.getQuestionList()
          })
        }).catch(() => {
          openMessage('已取消删除','info')
        });
      },
      Search(type) {
        if (type === 'up') {
          this.resetQuery()
        }else {
          this.form.evaluateRiskName = ''
        }
        this.getQuestionList()
      },
      // 导出
      exportClick() {
        this.download('/zhpg/risk/export', {
          ...this.form
        }, `问题&风险库.xlsx`,{ headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' } })
      },
      handleClick(type,item) {
        switch (type) {
          case 'detail' :
            this.diaLogform = item
            this.open = true
            break;
          case 'del' :
            this.$confirm('您确定要删除吗?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              let ids = [item.id]
              delQuestion(ids).then((res) => {
                openMessage('删除成功','success')
                this.getQuestionList()
              })
            }).catch(() => {
              openMessage('已取消删除','info')
            });
            break;
        }
      },
      //分页查询
      getQuestionList() {
        this.loading = true
        questionPageList(this.form).then((res) => {
          this.questionList = res.rows
          this.total = res.total
          this.loading = false
        }).catch(err => {
          this.loading = false
        })
      },
      // 表格选择事件
      handleSelectionChange(val) {
        if (val.length > 0) {
          this.selected = val.map(item => item.id)
        }else {
          this.selected = []
        }
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.form.evaluateRiskBusiness = ''
        this.form.evaluateRiskType = ''
        this.form.params = {}
        this.timeValue = ''
      },
    },
  };
</script>

<style lang="scss" scoped>
  ::v-deep .el-dialog__header {
    background-color: #354161;
    padding-bottom: 20px;
  }

  ::v-deep .el-dialog__footer {
    background-color: #f1f2f4;
    padding-top: 20px;
  }

  ::v-deep .el-dialog__title {
    color: white;
  }

  ::v-deep .czlialog {
    margin-top: 20vh;
  }

  .flex-container {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .inner-container {
    width: 80%;
  }

  .info-row {
    height: 40px;
  }

  .flex-row {
    display: flex;
    align-items: center;
  }

  .label {
    width: 30%;
    text-align: right;
    margin-right: 10px;
    font-weight: 900;
  }

  .value {
    width: 70%;
  }

  /* Assuming el-input is a custom component, you might need additional styling */
  .input-field {
    width: 70%;
  }

  /* 头部 */
  .task_top {
    min-height: 80px;
    box-shadow: 0 0px 10px rgba(0, 0, 0, 0.12), 0 2px 5px rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
    padding: 20px;
  }

  .task_top_1 {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .task_top_1 p {
    font-size: 20px;
    font-family: "微软雅黑";
    font-weight: bold;
  }

  .task_top_1 div {
    width: 500px;
  }

  ::v-deep .el-select.el-select--medium {
    width: 100%;
  }

  ::v-deep .blue label {
    color: blue;
  }
</style>
